<template>
  <section class="pay-container" v-cloak>
    <p class="class-name">结算明细: {{className||channelName}}</p>
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>缴费日期：</span>
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            size="small"
            placeholder="选择日期范围"
            :picker-options="dateOptions">
          </el-date-picker>
        </label>
        <!-- <label for="" class="choose">
          <span>缴费项目：</span>
          <el-select v-model="payment" filterable  placeholder="请选择" size="small" style="width:160px" class="select-box year-box">
            <el-option
              v-for="item in payList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </label> -->
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="search">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="export">
      <div class="data-t">
        <span>总缴费笔数：{{ countInfo.payNum }}</span>
        <span style="margin-left: 18px;">总缴费金额：{{ countInfo.payAmount | currency }}元</span>
        <span style="margin-left: 18px;" v-if="channelId">手续费总额：{{ countInfo.factorage | currency }}元</span>
        <span style="margin-left: 18px;" v-if="channelId">总实收金额：{{ countInfo.realityPay | currency }}元</span>
      </div>
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出</el-button>
    </el-row>
    <el-row class="data-list">
      <ctable :thead="thead" :table-data="lists" :options="options" :page-data="pageObj" :opt-width="80" all-align="center" :serial="true"></ctable>
    </el-row>
  </section>
</template>

<script>
import {getStatementDetail, getStatementDetailChannel, getCountInfo, getCountInfoChannel} from 'api/school/settlement/index'
// import { getPayMent } from 'api/payManage/index'
import ctable from 'components/common/ctable'
import { currency, timeFormat, getDayInitTime } from 'src/filter/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      startTime: 0, // 开始时间
      endTime: 0, // 结束时间
      dateTime: [], // 缴费日期
      lists: [], // 数据列表,
      thead: [],
      options: [{
        name: '详情',
        callback: this.toDetail
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      dateOptions: { // 时间组件参数
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      payment: 0, // 选择的缴费项目id
      payList: [], // 所有的缴费项目
      classId: Number(common.params('classId')), // 班级id
      className: common.params('className'), // 班级名称
      channelId: Number(common.params('channelId')), // 通道id
      channelName: common.params('channelName'), // 通道名称
      countInfo: {} // 统计信息
    }
  },
  created () {
    this.dateTime = [new Date(common.params('startTime') * 1000), new Date(common.params('endTime') * 1000)]
    this.getData(1)
    // this.getPaymentList()
  },
  components: {
    ctable
  },
  methods: {
    getData (int) { // 获取数据
      this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
      this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
      // 获取统计信息
      if (this.classId) { // 按班级
        this.thead = [{ // ctable组件头
          name: '缴费日期',
          prop: 'paymentDate',
          format: this.dateFilter
        }, {
          name: '班级名称',
          prop: 'className'
        }, {
          name: '缴费笔数',
          prop: 'payNum'
        }, {
          name: '缴费金额',
          prop: 'payAmount',
          format: this.priceFilter
        }]
        getCountInfo({
          startTime: this.startTime,
          endTime: this.endTime,
          classId: this.classId,
          schoolPaymentSkuId: this.payment
        }).then(res => {
          this.countInfo = res.data
        })
        // 获取数据列表
        getStatementDetail({
          page: int,
          count: 15,
          startTime: this.startTime,
          endTime: this.endTime,
          classId: this.classId,
          schoolPaymentSkuId: this.payment
        }).then(res => {
          this.lists = res.data || []
          this.pageObj.page = res.page
        })
      } else { // 按通道
        this.thead = [{
          name: '缴费日期',
          prop: 'paymentDate',
          format: this.dateFilter
        }, {
          name: '收费通道',
          prop: 'channelName'
        }, {
          name: '缴费笔数',
          prop: 'payNum'
        }, {
          name: '缴费金额',
          prop: 'payAmount',
          format: this.priceFilter
        }, {
          name: '通道费率',
          prop: 'rate',
          format: this.rateFilter
        }, {
          name: '手续费金额',
          prop: 'factorage',
          format: this.priceFilter2
        }, {
          name: '实收金额',
          prop: 'realityPay',
          format: this.priceFilter2
        }]
        getCountInfoChannel({
          startTime: this.startTime,
          endTime: this.endTime,
          channelId: this.channelId
        }).then(res => {
          this.countInfo = res.data
        })
        // 获取数据列表
        getStatementDetailChannel({
          page: int,
          count: 15,
          startTime: this.startTime,
          endTime: this.endTime,
          channelId: this.channelId
        }).then(res => {
          this.lists = res.data || []
          this.pageObj.page = res.page
        })
      }
    },
    // getPaymentList () { // 获取所有的项目
    //   getPayMent({classId: this.classId}).then(res => {
    //     this.payList = res.data
    //     this.payList.unshift({id: 0, name: '全部'})
    //   })
    // },
    toDetail (obj) {
      let o = {time: obj.paymentDate}
      if (this.classId) { // 按班级
        o.classId = this.classId
        o.className = this.className
      } else { // 按通道
        o.channelId = this.channelId
        o.channelName = this.channelName
        o.paymentType = obj.paymentType
      }
      this.$router.push({name: 'payList', query: o})
    },
    priceFilter (row, col, value) {
      return currency(value)
    },
    priceFilter2 (row, col, value) {
      return value / 100
    },
    search () {
      this.getData(1)
    },
    dateFilter (row, col, value) {
      return timeFormat(value, 'yyyy-MM-dd')
    },
    rateFilter (row, col, value) {
      return (value * 100) + '%'
    },
    exportData () {
      let loginKey = window.localStorage.loginKey
      if (this.classId) {
        window.open(`/net/schooladmin/school-order/exports-statement?classId=${this.classId}&startTime=${this.startTime}&endTime=${this.endTime}&schoolPaymentSkuId=${this.payment}&login-key=${loginKey}`)
      } else {
        window.open(`/net/schooladmin/channel_statement/exports-list-by-detail?channelId=${this.channelId}&startTime=${this.startTime}&endTime=${this.endTime}&login-key=${loginKey}`)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.pay-container {
  padding: 15px 25px 0;
  .data-t {
    color: #20a0ff;
  }  
  .class-name {
    line-height: 2;
    margin-bottom: 10px;
  }
  .search-box {
    padding: 25px 0 25px 25px;
    border: 1px solid #d3dce6;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .export {
    margin-top: 10px;
  }
}
</style>

